<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>连连看</title>
  </head>
  <!-- 最初版本,只做了相同消除,非常简陋 -->
  <body
    body
    oncontextmenu="self.event.returnValue"
    ="false"
    onselectstart="return false"
  ></body>
  <style type="text/css">
    * {
      margin: 0;
      padding: 0;
    }

    ul {
      list-style-type: none;
    }

    img {
      width: 100%;
      height: 100%;
    }

    body {
      background-color: bisque;
    }

    #head {
      width: 100%;
      height: 100px;
    }

    #start {
      width: 100px;
      height: 50px;
      line-height: 50px;
      margin: 25px auto;
      font-weight: bold;
      font-size: 17px;
      background-color: crimson;
      box-shadow: 1px 1px 3px 3px brown;
      text-align: center;
      color: white;
      transition: all 0.2s;
    }

    #start:hover {
      background-color: red;
      color: yellow;
      width: 105px;
      height: 53px;
      font-size: 19px;
      line-height: 53px;
      cursor: pointer;
    }

    #time {
      width: 100%;
      height: 50px;
      line-height: 50px;
      font-weight: bold;
      text-align: center;
      display: none;
    }

    #pro {
      width: 40%;
    }

    #boxs {
      width: 600px;
      height: 600px;
      margin: 0 auto;
      visibility: hidden;
      box-sizing: border-box;
    }

    #boxs > li {
      width: 600px;
      height: 60px;
      box-sizing: border-box;
    }

    #boxs > li > span {
      display: inline-block;
      width: 60px;
      height: 60px;
      background-color: antiquewhite;
      box-sizing: border-box;
      color: rgba(255, 255, 255, 0);
      clear: both;
    }

    #foot {
      width: 100%;
      height: 100px;
    }
  </style>

  <body>
    <div id="head">
      <p id="start">开始游戏</p>
      <p id="time">
        <progress id="pro" value="120" max="120"></progress><br />
        剩余时间 <span id="second">120</span>
      </p>
    </div>
    <ul id="boxs">
      <li>
        <span></span><span></span><span></span><span></span><span></span
        ><span></span><span></span><span></span><span></span><span></span>
      </li>
      <li>
        <span></span><span></span><span></span><span></span><span></span
        ><span></span><span></span><span></span><span></span><span></span>
      </li>
      <li>
        <span></span><span></span><span></span><span></span><span></span
        ><span></span><span></span><span></span><span></span><span></span>
      </li>
      <li>
        <span></span><span></span><span></span><span></span><span></span
        ><span></span><span></span><span></span><span></span><span></span>
      </li>
      <li>
        <span></span><span></span><span></span><span></span><span></span
        ><span></span><span></span><span></span><span></span><span></span>
      </li>
      <li>
        <span></span><span></span><span></span><span></span><span></span
        ><span></span><span></span><span></span><span></span><span></span>
      </li>
      <li>
        <span></span><span></span><span></span><span></span><span></span
        ><span></span><span></span><span></span><span></span><span></span>
      </li>
      <li>
        <span></span><span></span><span></span><span></span><span></span
        ><span></span><span></span><span></span><span></span><span></span>
      </li>
      <li>
        <span></span><span></span><span></span><span></span><span></span
        ><span></span><span></span><span></span><span></span><span></span>
      </li>
      <li>
        <span></span><span></span><span></span><span></span><span></span
        ><span></span><span></span><span></span><span></span><span></span>
      </li>
    </ul>
    <div id="foot"></div>

    <script>
      //文本部分
      var border_text = "2px solid red";
      //开始部分
      var boxs = document.getElementById("boxs");
      var strat = document.getElementById("start");
      var time = document.getElementById("time");
      var second = document.getElementById("second");
      var pro = document.getElementById("pro");
      strat.onclick = function () {
        strat.style.display = "none";
        boxs.style.visibility = "visible";
        time.style.display = "block";

        //计时功能
        var seconds = setInterval(function () {
          second.innerText = second.innerText - 1;
          pro.value = second.innerText;
          if (second.innerText == 0) {
            clearInterval(seconds);
            alert("失败");
            window.location.reload();
          }
        }, 1000);
      };
      //游戏部分
      var v_boxs = document.getElementById("boxs").getElementsByTagName("li");
      var arr = new Array();
      for (let i = 0; i < v_boxs.length; i++) {
        arr[i] = v_boxs[i].getElementsByTagName("span");
      }
      var count = 0;
      lists();
      var arr2 = new Array();
      for (let i = 0; i < arr.length; i++) {
        for (let j = 0; j < arr[i].length; j++) {
          arr[i][j].onclick = function () {
            arr2.push(arr[i][j]);
            if (arr2.length == 2) {
              if (arr2[1].style.border != border_text) {
                arr[i][j].style.border = border_text;
                setTimeout(links, 200);
              } else {
                arr2[0].style.border = "none";
                arr2[1].style.border = "none";
                arr2.splice(0, 2);
              }
            } else {
              arr[i][j].style.border = border_text;
            }
          };
        }
      }
      //消除功能
      function links() {
        if (arr2[0].innerText == arr2[1].innerText) {
          arr2[0].style.visibility = "hidden";
          arr2[1].style.visibility = "hidden";
          count += 2;
        } else {
          arr2[0].style.border = "none";
          arr2[1].style.border = "none";
        }
        arr2.splice(0, 2);
        if (count == 100) {
          alert("胜利");
        }
      }
      //随机功能
      function lists() {
        let r_arr1 = new Array();
        for (let i = 0; i < (arr.length * 10) / 2; i++) {
          if (i < 20) {
            r_arr1[i] = i;
          } else {
            r_arr1[i] = Math.floor(Math.random() * 20);
          }
        }
        let r_arr2 = r_arr1.slice(0, r_arr1.length);
        var r_arr = [].concat(r_arr1, r_arr2);
        for (let i = 0; i < r_arr.length; i++) {
          let r = Math.floor(Math.random() * 100);
          let temp = r_arr[i];
          r_arr[i] = r_arr[r];
          r_arr[r] = temp;
        }
        let a = 0;
        for (let i = 0; i < arr.length; i++) {
          for (let j = 0; j < arr[i].length; j++) {
            arr[i][j].innerText = r_arr[a];
            arr[i][j].style.backgroundImage =
              "url(../images/img_" + r_arr[a++] + ".png)";
            arr[i][j].style.backgroundSize = "100% 100%";
          }
        }
      }
    </script>
  </body>
</html>
